<script setup lang="ts">
import { onMounted } from "vue";
import { storeToRefs } from "pinia";
import { useRouter } from "vue-router";
import { showConfirmDialog } from "vant";
import type { Router } from "vue-router";
import useUserStore from "@/pinia/modules/userStore.ts";
import Info from "@/views/user/components/Info/Info.vue";
import Count from "@/views/user/components/Count/Count.vue";
import OrderCard from "@/views/user/components/OrderCard/OrderCard.vue";
import Group from "@/views/user/components/Group/Group.vue";
import NavBar from "@/components/lib/NavBar.vue";

const userStore = useUserStore();

const router: Router = useRouter();

const { userMessage } = storeToRefs(userStore);

/*点击退出登录按钮的回调函数*/
const handleLogout = async () => {
    // 提示用户是否退出登录 showConfirmDialog()函数返回的promise对象
    const dialog: "confirm" | "cancel" = await showConfirmDialog({ title: "温馨提示", message: "确认退出优医问诊吗?" }).catch(error => error);
    // 如果是cancel证明点击了取消return出去不执行下面逻辑
    if (dialog === "cancel") return;
    // 清空用户信息(本存储和pinia)
    userStore.doClearUserInfo();
    // 路由跳转
    await router.push("/login");
};


onMounted(() => {
    userStore.fetchUserMessage();
});

</script>

<template>
    <nav-bar title="个人中心" fixed></nav-bar>
    <div class="user">
        <div class="head">
            <Info :user-message="userMessage"></Info>
            <Count :user-message="userMessage"></Count>
        </div>
        <div class="order">
            <order-card :order-info="userMessage.orderInfo"></order-card>
        </div>
        <Group></Group>
        <van-button type="danger"   block round @click="handleLogout">退出登录</van-button>
    </div>
</template>

<style lang="scss" scoped>

.user {
    background-color: var(--cp-bg);
    min-height: calc(100vh - 50px);
    padding: 40px 15px 65px;


    .head {
        height: 180px;
        background: linear-gradient(180deg, rgba(24, 213, 189, 0.46), rgba(44, 181, 165, 0));
        margin: 0 -15px;
        padding: 0 15px;

    }

    .van-button {
        margin-top: 20px;
    }
}
</style>
